<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
header{
	width: 100%;
	position: absolute;
	bottom: 20px;
	/*border: 1px solid red;*/
	text-align: center;
}
header div{
	width: 100px;height: 100px;
	/*border: 1px solid black;*/
	border-radius: 50%;
	display: inline-block;
}
.dv1{
	background: url(images/1.png) no-repeat;
	background-size: 100%;
}
.dv2{
	background: url(images/2.png) no-repeat;
	background-size: 100%;
}
.dv3{
	background: url(images/3.png) no-repeat;
	background-size: 100%;
}
.dv4{
	background: url(images/4.png) no-repeat;
	background-size: 100%;
}
.dv5{
	background: url(images/5.png) no-repeat;
	background-size: 100%;
}
.dv6{
	background: url(images/1.png) no-repeat;
	background-size: 100%;
}
.dv7{
	background: url(images/2.png) no-repeat;
	background-size: 100%;
}
.dv8{
	background: url(images/3.png) no-repeat;
	background-size: 100%;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<header>
	<div class="dv1"></div>
	<div class="dv2"></div>
	<div class="dv3"></div>
	<div class="dv4"></div>
	<div class="dv5"></div>
	<div class="dv6"></div>
	<div class="dv7"></div>
	<div class="dv8"></div>
</header>

</body>
<script>
    // 一.抓取元素
	var inputs = document.getElementsByTagName('input');
	var header = document.getElementsByTagName('header')[0];
	var dvs = document.getElementsByTagName('div');
	// 二.绑定事件
	document.onmousemove=function(e){
		// 1.兼容的事件对象
        var ev = window.event || e ;
        // 2.获得鼠标的坐标位置
        var x = ev.clientX;
        var y = ev.clientY;
        document.title = x +"|"+ y;
        // 3.遍历
        for(var i=0;i<dvs.length;i++){
        	// (1) 获得圆心的坐标位置
            var l = header.offsetLeft + dvs[i].offsetLeft + dvs[i].offsetWidth/2;
            var t = header.offsetTop + dvs[i].offsetTop + dvs[i].offsetHeight/2;
            // （2）获得圆心到鼠标的长度
            var  c  =Math.sqrt(Math.pow(l-x,2)+Math.pow(t-y,2));
            inputs[i].value = c;

            // 直径   d    100    200
            // 长度   c    300    0
            // 比率   rate   0.5   1
            // 比率
   			rate = 1 - c/600;
   			// 比率范围  0.5--1
   			if(rate<0.5){
   				rate=0.5;
   			}
            // 计算出元素的直径
            d = rate * 200;
            // 将值赋给元素
            dvs[i].style.width = d + "px";
            dvs[i].style.height = d + "px";

     
        }

	}







</script>
</html>